<template>
  <div class="home">
    <div class="body_content">
      <ul>
        <li v-for=" times in HomeClassifyArray">
          <img :src="times.image" alt="">
          <span>
            {{times.name}}
          </span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      HomeClassifyArray: {
        type: Array,
        default() {
          return []
        }
      },
    },
    components: {},
    data() {
      return {}
    },
    methods: {},
    watch: {},
    computed: {
      //计算属性
    },
    created() {

    },
    mounted() {
      //生命周期
    }
  }
</script>
<style scoped>
  .home {
    width: 100%;
    height: 100%;
  }

  .body_content {
    padding: .25rem 0 1.125rem;
    min-height: 10.125rem;
  }

  .body_content ul {
    width: 100%;
    height: 100%;
  }

  .body_content ul li {
    float: left;
    width: 20%;
  }

  .body_content ul li img {
    width: 2.5rem;
    height: 2.5rem;
    background-size: 100% 100%;
    margin: 0 auto .2188rem;
  }

  .body_content ul li  span {
    font-size: .75rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: box;
    line-clamp: 1;
    box-orient: vertical;
    height: .875rem;
    line-height: .875rem;
    width:100%;
    text-align: center;
  }

</style>
